<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { NButton, NImage, NInput, NSelect, NSlider, NSwitch, NTabPane, NTabs, NTag, NTooltip, useMessage, useOsTheme } from 'naive-ui'
import type { CSSProperties } from 'vue'
import mcUploaderMp3 from './mcUploadMp3.vue'
import { SvgIcon } from '@/components/common'
import { mlog } from '@/api'
import { FeedTask, lyricsFetch, randStyle, sunoFetch } from '@/api/suno'
import { t } from '@/locales'
import { homeStore, useAppStore } from '@/store'
import type { SunoMedia } from '@/api/sunoStore'
const st = ref({ type: 'custom', isLoading: false })
const exSuno = ref<SunoMedia>()
const des = ref({
  gpt_description_prompt: '',
  make_instrumental: false,
  mv: 'chirp-v3-5',
  prompt: '',
})
const cs = ref({
  prompt: '',
  mv: 'chirp-v3-5',
  title: '',
  tags: '',
  continue_at: 120,
  continue_clip_id: '',

})
const OsTheme = useOsTheme()
const mvOption = [
  { label: 'verion: v3.5', value: 'chirp-v3-5' },
  { label: 'verion: v3', value: 'chirp-v3-0' },
]

const canPost = computed(() => {
  // return true;
  if (st.value.isLoading)
    return false
  if (st.value.type == 'custom')
    return cs.value.tags && cs.value.title

  if (st.value.type == 'description') {
    mlog('des: ', des.value.gpt_description_prompt, des.value.make_instrumental)
    return cs.value.title && (des.value.gpt_description_prompt || des.value.make_instrumental)
  }
  return true
})

const ms = useMessage()
onMounted(() => {
  homeStore.setMyData({ ms })
})
// 生成歌词
const generateLyrics = () => {
  // generate/lyrics
  const prompt = cs.value.prompt || cs.value.title
  if (!prompt) {
    ms.error(t('suno.inputly'))
    return
  }
  if (st.value.isLoading) {
    ms.info(t('suno.doingly'))
    return
  }
  st.value.isLoading = true
  ms.info(t('suno.doingly2'))
  sunoFetch('/generate/lyrics/', { prompt }).then(async (r: any) => {
    mlog('lyrics', r)
    const dz: any = await lyricsFetch(r.data)
    mlog('lyrics rz =>', dz)
    if (dz != null) {
      cs.value.prompt = dz.data.data.text
      cs.value.title = dz.data.data.title
    }
    st.value.isLoading = false
  }).catch(() => st.value.isLoading = false)
  if (!cs.value.tags)
    cs.value.tags = randStyle()
}

// 生成歌曲
const generate = async () => {
  st.value.isLoading = false
  let ids: string[] = ['0d435185-d440-42c8-982a-50205e1cf17d', '43e095ba-5f08-4920-bb3d-89dd0defe0b7']
  ids = ['d359a0aa-adf1-4298-9074-005573d7cc84', '12e3d62f-8fcc-497b-8365-194657582519']

  if (st.value.type == 'custom') {
    if (des.value.make_instrumental)
      cs.value.prompt = ''
    if (cs.value.continue_clip_id != '' && exSuno.value?.metadata?.type == 'upload') {
      // chirp-v3-5-upload
      cs.value.mv = 'chirp-v3-5-upload'
    }
    const r: any = await sunoFetch('/generate', cs.value)
    st.value.isLoading = false

    ids = r.clips.map((r: any) => r.id)
    mlog('ids ', ids)
    if (cs.value.mv = 'chirp-v3-5-upload')
      cs.value.mv = 'chirp-v3-5'
  }
  else {
    des.value.prompt = cs.value.title
    const r: any = await sunoFetch('/generate/description-mode', des.value)
    st.value.isLoading = false
    ids = r.clips.map((r: any) => r.id)
  }
  FeedTask(ids)
}

watch(() => homeStore.myData.act, (n) => {
  if (n == 'suno.extend') {
    mlog('suno.extend', homeStore.myData.actData)
    const s = homeStore.myData.actData as SunoMedia
    exSuno.value = s
    cs.value.continue_clip_id = s.id
    cs.value.continue_at = Math.ceil(s.metadata.duration / 2)
  }
})
const appStore = useAppStore()
const isDark = computed(() => {
  if (appStore.theme === 'auto')
    return OsTheme.value === 'dark'
  else
    return appStore.theme === 'dark'
})
const railStyle = ({
  focused,
  checked,
}: {
  focused: boolean
  checked: boolean
}) => {
  const style: CSSProperties = {}
  if (checked) {
    style.background = '#0084FF'
    if (focused) {
      // style.boxShadow = '0 0 0 2px #d0305040'
    }
  }
  // else {
  //   style.background = '#2080f0'
  //   if (focused) {
  //     style.boxShadow = '0 0 0 2px #2080f040'
  //   }
  // }
  return style
}
</script>

<template>
  <div class="p-2">
    <NTabs v-model:value="st.type" type="line" animated>
      <!-- <n-tab-pane name="start" tab="">

        </n-tab-pane> -->
      <!-- <NText depth="3" class="text-center">{{ $t('suno.mic') }}</NText> -->
      <NTabPane name="description" :tab="$t('suno.description')">
        <div class="pt-1">
          <NInput v-model:value="cs.title" :placeholder="$t('suno.titlepls')">
            <template #prefix>
              <span>{{ $t('suno.title') }}：</span>
            </template>
          </NInput>
        </div>
        <div class="pt-4 flex justify-between" style="margin-bottom: 10px">
          <div>{{ $t('suno.desc') }}:</div>
          <div>
            <NSwitch v-model:value="des.make_instrumental" size="small" :rail-style="isDark ? railStyle : ''">
              <template #checked>
                {{ $t('suno.noneedly') }}
              </template>
              <template #unchecked>
                {{ $t('suno.noneedly') }}
              </template>
            </NSwitch>
          </div>
        </div>
        <div class="pt-1">
          <NInput
            v-model:value="des.gpt_description_prompt" :disabled="des.make_instrumental"
            :placeholder="$t('suno.descpls')" type="textarea" size="small"
            :autosize="{ minRows: 3, maxRows: 12 }"
          />
        </div>
        <div class="pt-1">
          <NSelect v-model:value="des.mv" :options="mvOption" size="small" />
        </div>
      </NTabPane>

      <NTabPane name="custom" :tab="$t('suno.custom')">
        <div class="pt-1">
          <NInput v-model:value="cs.title" :placeholder="$t('suno.titlepls')">
            <template #prefix>
              <span>{{ $t('suno.title') }}：</span>
            </template>
          </NInput>
        </div>
        <div class="pt-4">
          <NInput v-model:value="cs.tags" :placeholder="$t('suno.stylepls')">
            <template #prefix>
              <span>{{ $t('suno.style') }}：</span>
            </template>
            <template #suffix>
              <NTooltip placement="right" trigger="hover">
                <template #trigger>
                  <div class="cursor-pointer" @click="cs.tags = randStyle()">
                    <SvgIcon icon="fa:random" class="w-4 h-4" />
                  </div>
                </template>
                <div>{{ $t('suno.rank') }}</div>
              </NTooltip>
            </template>
          </NInput>
        </div>

        <div class="pt-4 flex justify-between" style="margin-bottom: 15px">
          <div>{{ $t('suno.ly') }} :</div>
          <div>
            <NSwitch v-model:value="des.make_instrumental" size="small" :rail-style="isDark ? railStyle : ''">
              <template #checked>
                {{ $t('suno.noneedly') }}
              </template>
              <template #unchecked>
                {{ $t('suno.noneedly') }}
              </template>
            </NSwitch>
          </div>
        </div>
        <div class="pt-1">
          <NInput
            v-model:value="cs.prompt" :disabled="des.make_instrumental"
            :placeholder="$t('suno.lypls')" type="textarea" size="small"
            :autosize="{ minRows: 3, maxRows: 12 }"
          />
        </div>
        <div class="pt-1">
          <NSelect v-model:value="cs.mv" :options="mvOption" size="small" />
        </div>
        <template v-if="cs.continue_clip_id && exSuno">
          <div class="pt-5">
            <div class="flex justify-between pb-3">
              <div class="text-[12px]">
                {{ $t('suno.extendAt') }} {{ cs.continue_at }}s
              </div>
              <NTag type="success" size="small" round>
                <span class="cursor-pointer" @click="cs.continue_clip_id = ''">清除</span>
              </NTag>
            </div>
            <NSlider v-model:value="cs.continue_at" :step="1" :max="Math.ceil(exSuno.metadata.duration)">
              <template #thumb>
                <div class="bg-[--n-fill-color] text-[9px]  border-[0px]  px-1 list-none rounded-md">
                  {{ cs.continue_at }}s
                </div>
              </template>
            </NSlider>
          </div>
          <div class="pt-1">
            <div class="flex relative  justify-between items-start p-2 hover:dark:bg-black hover:bg-gray-200 border-b-[1px] border-gray-500/10 ">
              <div class="w-[60px] h-[60px] relative  cursor-pointer">
                <NImage lazy width="100" :src="exSuno.image_url" preview-disabled>
                  <template #placeholder>
                    <div class="w-full h-full justify-center items-center flex">
                      <SvgIcon icon="line-md:downloading-loop" class="text-[40px] text-green-300" />
                    </div>
                  </template>
                </NImage>
              </div>
              <div class="flex-1  pl-2">
                <div class="flex justify-between line-clamp-1 w-full cursor-pointer">
                  <h3>{{ exSuno.title }}</h3>
                  <!-- <div class="opacity-80"  >{{exSuno.metadata.tags}}</div> -->
                </div>
                <div v-if="exSuno.metadata && exSuno.metadata.prompt" class="opacity-60 line-clamp-1 w-full text-[12px] cursor-pointer">
                  {{ exSuno.metadata.prompt }}
                </div>
                <div v-else class="opacity-60 line-clamp-1 w-full text-[12px] cursor-pointer">
                  {{ $t('suno.noly') }}
                </div>
                <div class="text-right text-[14px] flex justify-end items-center space-x-2  ">
                  <div v-if="exSuno.status == 'error'" class="text-[8px] flex items-center border-[1px] border-red-500/80 px-1 list-none rounded-md ">
                    失败
                  </div>
                  <template v-if="exSuno.metadata && exSuno.metadata.duration">
                    <div class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 list-none rounded-md">
                      {{ exSuno.metadata.duration.toFixed(1) }}s
                    </div>
                  </template>
                  <div v-if="exSuno.major_model_version" class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 list-none rounded-md">
                    {{ exSuno.major_model_version }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </NTabPane>
    </NTabs>

    <div class="pt-4">
      <div class="flex justify-between items-start">
        <NButton type="success" class="genner-button" :bordered="false" style="border-radius: 8px" :disabled="!canPost" @click="generate()">
          <SvgIcon icon="ri:music-fill" /> {{ $t('suno.generate') }}
        </NButton>
      </div>
      <div class="flex items-start" style="margin-top: 15px">
        <NTag v-if="st.type == 'custom'" type="info" round :bordered="false" style="margin-right: 15px" size="small">
          <span class="cursor-pointer" @click="generateLyrics()">{{ $t('suno.generately') }}</span>
        </NTag>
        <!-- <NTag v-if="st.type=='custom'" type="info" size="small" round  ><span class="cursor-pointer" @click="generateLyrics()" >上传音频</span></NTag> -->
        <mcUploaderMp3 v-if="st.type == 'custom'" />
      </div>
    </div>
    <div v-if="st.type == 'custom'" style="color: #d84c10" class="pt-4 text-[12px]" v-html="t('suno.info')" />
  </div>
</template>
